<template>
    <div :style="{marginTop:$store.state.navbarHeight+12+'rpx'}">
        <Navbar title="ساقلىۋالغانلىرىم" :showIcon="true" bgColor="bg-gradual-2" />
        <div class="wrap" :style="{marginTop:customBar()*2+12+'rpx'}">
            <div class="videos">
                <div class="list">
                    <VideoCover show="true" v-for="item in videoList" :key="item.vid" :info="item"></VideoCover>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Navbar from "@/components/Navbar.vue";
import VideoCover from "@/components/VideoCover.vue";
import { Base64, $Toast } from "@/utils/index";
import { mapActions, mapGetters } from "vuex";
export default {
    components: {
        Navbar,
        VideoCover
    },
    mounted() {
        this.getList();
    },
    onLoad() {
        this.uid = this.$root.$mp.query.uid;
    },
    data() {
        return {
            uid: 0,
            videoList: [],
            currentPage: 1,
            pageSize: 12
        };
    },
    methods: {
        ...mapGetters(["customBar", "statusBar", "clientRect"]),
        getList() {
            // this.videoList = this.$store.state.likeList;
            this.$http
                .get("/mpGetVideo", {
                    from: "collect",
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                    uid: this.uid
                })
                .then(res => {
                    let listStr = res.list
                        .replace(/\&/g, "A")
                        .replace(/\%/g, "B");
                    let list = Base64.decode(listStr);
                    list = JSON.parse(list);
                    this.videoList = list;
                });
        }
    },
    onShareAppMessage() {
        return {
            title: "مارس كىنوخانىسى",
            path: `/pages/Home/Home`,
            success: res => {
                console.log("share-success");
            },
            fail: () => {
                console.log("share-fail");
            },
            complete: () => {}
        };
    }
};
</script>

<style lang="scss" scoped>
.wrap {
    border: 1rpx solid transparent;
    .videos {
        width: 98%;
        margin: 0 auto;
        .list {
            display: grid;
            grid-template-columns: 32% 32% 32%;
            grid-column-gap: 15rpx;
        }
    }
}
</style>